<template>
	<div class="wtop">
		<div class="top-title">
            <div>
                欢迎<span><router-link to="/personalCenter">{{user_name}}</router-link></span>
			    <span @click="exit" style="cursor: pointer; color:#666;">退出</span>
            </div>
			<!-- <div>
                <span><router-link to="/setup/flag"><img :src="gnurl">功能设置</router-link></span>
				<span><router-link target="_blank" to="/help/howtoAlt"><img :src="help">帮助中心</router-link></span>
            </div> -->
		 </div>
		<div class="top-center">
			<div class="content">
				<div class="top-logo" style="display: flex;" >
					<div style="display: flex; align-items: center; cursor: pointer;" @click="go">
						<img src="../../../static/img/fanhuis.png" style="width: 25px; top: 0; margin-right: 5px;" />
						<span style="font-size: 16px; color: #EEF7FF; margin-right: 20px;">返回</span>
					</div>
					
				<img :src="srclogo" style="height: 48px;"></div>
        <div class="powerTop">
          <router-link class="powertopli" :class="route_class ? 'powertopact' : ''" to="/callsystem/taskCenter">外呼中心</router-link>
          <router-link class="powertopli" :class="!route_class ? 'powertopact' : ''" :to="defultRoute" v-if="func_K02">管理中心</router-link>
        </div>
			</div>
      <div>

      </div>
		</div>
      <div class="topTag" v-if="route_class">
        <div class="topLogo"><img :src="srcicon1">外呼中心</div>
        <div class="powertop">
          <router-link class="powertopli" :class="route_class1 == 1 ? 'powertopact' : ''" to="/callsystem/taskCenter">外呼任务</router-link>
          <router-link class="powertopli" :class="route_class1 == 2 ? 'powertopact' : ''" to="/callsystem/orderCallLogs">拨打记录</router-link>
      <!-- <router-link class="powertopli" to="/callsystem/taskReport">我的收藏</router-link> -->
        </div>
      </div>
      <div class="topTag" v-if="!route_class">
        <div class="topLogo"><img :src="srcicon2">管理中心</div>
        <div class="powertop">
          <router-link class="powertopli" :class="route_class1 == 3 ? 'powertopact' : ''" to="/callsystem/taskReport" v-if="func_K03">数据报表</router-link>
          <router-link class="powertopli" :class="route_class1 == 4 ? 'powertopact' : ''" to="/callsystem/personReport">人员报表</router-link>
          <router-link class="powertopli" :class="route_class1 == 5 ? 'powertopact' : ''" to="/callsystem/taskControl" v-if="func_K03">任务管理</router-link>
        </div>
      </div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
	    name: 'wtop',
      data(){
        return {
          user_name:"",
                  flags: false,
                  title:"订单管理平台",
                  gnurl:"./static/img/gn.png",
          srclogo:"./static/img/whlogo.png",
          srcicon1:"./static/img/wh_icon1.png",
          srcicon2:"./static/img/wh_icon2.png",
          help: "./static/img/help.png",
          route_class: true,
          route_class1: 1,

          defultRoute: '/callsystem/personReport',
          func_K02: false,
          func_K03: false
        }
		},
		created() {

      document.documentElement.style.fontSize = '14px';
			var that = this
			//验证登陆
			axios.get("/api/auth/me")
			  .then(function(response) {
			    if(response.data.msg.code == 0){

					console.log("hello,welcome!")
			    }else{
			    	that.$message.error("未登录，请先登录");
					that.$router.push({ path: "/callsystem/wlogin" });
			    }
			  })
      //左上角店铺名
			var shop = JSON.parse(localStorage.getItem('USER'));
			this.user_name = shop.name

      //权限问题
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for( var i in this.user_func){
          var func_number = this.user_func[i].code
          if(func_number.indexOf("K02") >= 0){ this.func_K02 = true }
          if(func_number.indexOf("K03") >= 0){ this.func_K03 = true }
      }
      this.defultRoute = (this.func_K02 && this.func_K03) ? '/callsystem/taskReport' : '/callsystem/personReport'

      //路由控制标签选中状态
      let route_name = this.$route.name
      if(route_name == 'taskCenter' || route_name == 'callLogs' || route_name == 'callOut' || route_name == 'callOrder' || route_name == 'orderCallLogs'){
        this.route_class = true
      }
      else{
        this.route_class = false
      }
      if(route_name == 'taskCenter'){
        this.route_class1 = 1
      }
      if(route_name == 'callLogs' || route_name == 'orderCallLogs'){
        this.route_class1 = 2
      }
      if(route_name == 'taskReport'){
        this.route_class1 = 3
      }
      if(route_name == 'personReport'){
        this.route_class1 = 4
      }
      if(route_name == 'taskControl'){
        this.route_class1 = 5
      }

		},
		methods:{
			//退出
			exit:function(){
				var that = this
				axios.get('/api/auth/logout')
					.then(function () {
						that.$router.push({ path: "/callsystem/wlogin" });
					})
			},
			go:function(){
				this.$router.push({ path: "/" });
			}

		}

	}
</script>

<style lang="scss" scoped>
    .where{ background: #F9FAFC; padding: 10px 20px; font-size: 14px; border: 1px #C4D5E0 solid; color: #707070;
        a{ color: #707070}
		a:hover{ color: #ee3f4d}
    }
    // .el-input__inner{ line-height: 36px !important; height: 36px!important;}
    .el-button--danger{ padding: 14px 30px; line-height: 14px;}
	.wtop{
    .topTag{display: flex;background: #fff;position: relative;border-bottom: #e2e0e3 1px solid;min-width: 1366px;width: 1366px;margin: 0 auto;
      .topLogo{ font-size: 20px; color: #707070;display: flex;align-items: center;padding: 14px 0;
        img{ width: 30px;height: 30px;margin: 0 10px;}
      }
      .powertop{ display: flex; width: 100%;position: absolute;justify-content: center;}
      .powertopli{ cursor: pointer;flex-basis: 120px; line-height: 50px;padding-top: 5px; border-bottom: 3px #fff solid; color: #707070; font-size: 18px; text-align: center;}
      .powertopact{border-bottom: 3px #4D4D4D solid;font-weight: bold;}
    }
		.top-logo{ font-size: 28px; color: #2974FF;
            img{ position: relative; top: 16px;}
        }
		.top-center{ background: #fff; margin-bottom: 16px; box-shadow: 0px 0px 5px #ccc; line-height: 80px}
		.content{ min-width: 1366px;width: 1366px; margin: 0 auto; display: flex; justify-content: space-between}
		.top-title{ min-width: 1366px;width: 1366px; margin: 0px auto; color: #666; line-height: 27px; font-size: 14px; display: flex; justify-content: space-between;}
		.top-title span{ margin: 0 10px; color: #666;
            a{ color: #666;}
			img{ position: relative; width: 15px; margin-right: 5px; top: 1px;}
        }
        .comeon{
            position: fixed; right: 0; bottom: 0; width: 200px; box-shadow: 0px 0px 2px #d0dfe6; background: #d0dfe6; z-index: 9999; font-size: 14px;
            color: #8076a3; line-height: 20px; text-align: center; max-height: 120px;
            &>div{ padding: 10px 0;}
            .hide{ background: #F9FAFC; color: #666; cursor: pointer;}
        }
    .powerTop{ display: flex;
      .powertopli{ flex-basis: 120px;line-height: 45px;padding: 30px 20px 0;border-bottom: 3px #fff solid;font-size: 20px; text-align: center;color: #707070;}
      .powertopact{ background: #FFFFFF; border-bottom: 3px #FF6E6E solid;color: #FF7272;}
    }
	}
    .color1{ width: 60px; height: 24px; margin: 5px 0; background: #e4dfd7;}
    .color1s{ float: right; color: #8492a6; font-size: 13px}
    .color2{ width: 60px; height: 24px; margin: 5px 0; background: #ee3f4d;}
    .color2s{ float: right; color: #8492a6; font-size: 13px}
    .color3{ width: 60px; height: 24px; margin: 5px 0; background: #ebb10d;}
    .color3s{ float: right; color: #8492a6; font-size: 13px}
    .color4{ width: 60px; height: 24px; margin: 5px 0; background: #229453;}
    .color4s{ float: right; color: #8492a6; font-size: 13px}
    .color5{ width: 60px; height: 24px; margin: 5px 0; background: #2775b6;}
    .color5s{ float: right; color: #8492a6; font-size: 13px}
    .color6{ width: 60px; height: 24px; margin: 5px 0; background: #8076a3;}
    .color6s{ float: right; color: #8492a6; font-size: 13px}


</style>
